<template>
  <div class="navbar">
    <div><img src="../assets/img/logo.png" height="42"/></div>
    <div class="head_menu">
      <!-- <div v-for="item in allMenu" :key="item.pkMenu">
        <router-link v-if="item.url" :to="{path: item.url}">{{item.name}}</router-link>
        <span v-else @click="checkRoute(item)">{{item.name}}</span>
      </div> -->
    </div>
    <el-dropdown>
        <span class="el-dropdown-link">
            <img src="../assets/img/header.svg" class="head_img"/>
            <span>{{user.userInfo?.value?.username||''}}</span>
            <ElIcon class="el-icon--right"><ArrowDown /></ElIcon>
        </span>
        <template #dropdown>
        <el-dropdown-menu>
            <el-dropdown-item @click="visible = true">修改密码</el-dropdown-item>
            <el-dropdown-item @click="loginOut">退出登录</el-dropdown-item>
        </el-dropdown-menu>
        </template>
    </el-dropdown>
  </div>
  <el-dialog title="修改密码" v-model="visible" width="400" :append-to-body="true">
    <el-form :model="dataForm" ref="passwordRef" @keyup.enter.native="dataFormSubmit(passwordRef)" label-width="80px">
      <el-form-item label="账号">
        <span>{{user.userInfo?.value?.username||''}}</span>
      </el-form-item>
      <el-form-item label="原密码" prop="password" :rules="{ required: true, message: '原密码不能为空', trigger: 'blur' }">
        <el-input type="password" v-model="dataForm.password"></el-input>
      </el-form-item>
      <el-form-item label="新密码" prop="newPassword" :rules="{ required: true, message: '新密码不能为空', trigger: 'blur' }">
        <el-input type="password" v-model="dataForm.newPassword"></el-input>
      </el-form-item>
      <el-form-item label="确认密码" prop="confirmPassword" :rules="[
            { required: true, message: '确认密码不能为空', trigger: 'blur' },
            { validator: validateConfirmPassword, trigger: 'blur' }
          ]">
        <el-input type="password" v-model="dataForm.confirmPassword"></el-input>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" :loading="loading" :disabled="loading" @click="dataFormSubmit(passwordRef)">确定</el-button>
    </span>
  </el-dialog>
</template>
<script setup>
import { storeToRefs } from 'pinia'
import {menuStore} from '../stores/menu.js'
import {ElDropdown, ElIcon, ElDropdownMenu, ElDropdownItem, ElMessage, ElMessageBox, ElDialog, ElForm, ElFormItem, ElInput, ElButton} from 'element-plus'
import { ArrowDown } from '@element-plus/icons-vue'
import {useUsersStore} from '@/stores/user.js'
import {clearLoginInfo} from '@/utils/index.js'
import {logout} from '../server/common/login'
import { useRouter } from 'vue-router'
import { reactive, ref } from 'vue'
import {setPassword} from "@/server/manage/sys.js"

const store = menuStore()
const {allMenu} = storeToRefs(store)
const user = storeToRefs(useUsersStore())
const router = useRouter()
const visible = ref(false)
const passwordRef = ref()
const loading = ref(false)
// 切换大路由
const checkRoute = (item) => {
  store.setChildMenu(item.subList)
}
const dataForm = reactive({
    password: '',
    newPassword: '',
    confirmPassword: ''
})
const validateConfirmPassword = (rule, value, callback) => {
    if (dataForm.newPassword !== value) {
        callback(new Error('确认密码与新密码不一致'))
    } else {
        callback()
    }
}
// 退出登录
const loginOut = () => {
    ElMessageBox.confirm('您确定退出登录吗？','提示',
        {confirmButtonText: '确定',cancelButtonText: '取消',type: 'warning',}
    ).then(() => {
        logout().then(res => {
            clearLoginInfo()
            ElMessage({ type: 'success', message: '退出成功！'})
            router.replace({ name: 'login' })
        })
    })
    .catch()
}

// 修改密码提交
const dataFormSubmit = (formEl) => {
    if (!formEl) return
    formEl.validate( async(valid) => {
        if (valid) {
            loading.value = true
            setPassword(dataForm).then(res => {
                loading.value = false
                logout().then(res => {
                    clearLoginInfo()
                    ElMessage({ type: 'success', message: '退出成功！'})
                    router.replace({ name: 'login' })
                })
            })
        }
    })
}
</script>
<style scoped>
.navbar{
  height: 56px;
  padding: 5px 10px;
  box-shadow: 0 0 10px var(--el-color-info-light-8);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  position: relative;
  z-index: 9;
}
.head_menu{
  display: flex;
  align-items: center;
  cursor: pointer;
}
.head_img{
    width: 30px;
    height: 30px;
    border-radius: 50%;
    margin-right: 10px;
}
.el-dropdown-link{
    display: flex;
    align-items: center;
}
</style>